<template>
  <div class="content">
    <div class="list" v-for="(item,index) in setForm" :key="index">
      <span>{{item.title}}</span>
      <div v-for="(e,i) in item.list" :key="i">
        <span v-if="e.type !== 'textarea'">{{e.label}}</span>
        <div class="switch" v-if="e.type === 'switch'">
          <switch
            :checked="switchForm[e.key] === '1'"
            @change="updateSwitchChange(e)"
          />
        </div>
        <div class="input" v-if="e.type === 'input'">
          <input
            type="digit"
            placeholder-style="color: #ddd;"
            v-model="form[e.key]"
            placeholder="请输入"
          />
          <span class="solt">{{e.solt}}</span>
        </div>
        <div class="picker" v-if="e.type === 'picker'">
          <picker
            class="picker-box"
            mode="selector"
            :value="pickerIndex"
            :range="couponPicker"
            range-key="couponTypeName"
            @change="bindPickerChange"
          >
            <span class="pickerName" v-if="!pickerName">请选择</span>
            <span class="pickerNameOn" v-else>{{pickerName}}</span>
            <i-icon class="icon" type="enter" size="16" color="#ddd" />
          </picker>
        </div>
        <div class="textarea" v-if="e.type === 'textarea'">
          <textarea
            class="input"
            v-model="form[e.key]"
            :placeholder="e.placeholder"
            placeholder-style="color: #ddd;"
            maxlength="-1"
          />
        </div>
      </div>
    </div>
    <button class="btn" @click="handleSubmit">保存</button>
  </div>
</template>

<script>
import {
  FIND_SHOP_SET_CONFIG,
  GET_COU_PON,
  FIND_COUPON_PAGE,
  SET_SHOP_COMMERT_AWARD_CONFIG
} from '@/api'

export default {
  components: {},
  data () {
    return {
      form: {},
      switchForm: {},
      couponPicker: [],
      pickerIndex: '',
      pickerName: '',
      pickerId: ''
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    setForm () {
      return [
        {
          title: '评分项选择',
          list: [
            {
              label: '综合评分',
              value: this.form.multipleScore,
              type: 'switch',
              key: 'multipleScore'
            },
            {
              label: '商品评分',
              value: this.form.goodsScore,
              type: 'switch',
              key: 'goodsScore'
            },
            {
              label: '服务评分',
              value: this.form.serviceScore,
              type: 'switch',
              key: 'serviceScore'
            },
            {
              label: '物流评分',
              value: this.form.expreeScore,
              type: 'switch',
              key: 'expreeScore'
            }
          ]
        },
        {
          title: '评价文字奖励',
          list: [
            {
              label: '评价文字数量',
              value: this.form.evaluateSize,
              type: 'input',
              solt: '字节',
              key: 'evaluateSize'
            },
            {
              label: '奖励积分',
              value: this.form.integral,
              type: 'input',
              solt: '积分',
              key: 'integral'
            },
            {
              label: '奖励豆豆',
              value: this.form.pension,
              type: 'input',
              solt: '豆豆',
              key: 'pension'
            },
            {
              label: '奖励贝币',
              value: this.form.coin,
              type: 'input',
              solt: '贝币',
              key: 'coin'
            }
          ]
        },
        {
          title: '上传图片奖励',
          list: [
            {
              label: '上传图片数量',
              value: this.form.evaluateImages,
              type: 'input',
              solt: '张',
              key: 'evaluateImages'
            },
            {
              label: '奖励积分',
              value: this.form.imageIntergral,
              type: 'input',
              solt: '积分',
              key: 'imageIntergral'
            },
            {
              label: '奖励豆豆',
              value: this.form.imagePension,
              type: 'input',
              solt: '豆豆',
              key: 'imagePension'
            },
            {
              label: '奖励贝币',
              value: this.form.imageCoin,
              type: 'input',
              solt: '贝币',
              key: 'imageCoin'
            }
          ]
        },
        {
          title: '评论置顶奖励',
          list: [
            {
              label: '奖励积分',
              value: this.form.topIntegergral,
              type: 'input',
              solt: '积分',
              key: 'topIntegergral'
            },
            {
              label: '奖励豆豆',
              value: this.form.topPension,
              type: 'input',
              solt: '豆豆',
              key: 'topPension'
            },
            {
              label: '奖励贝币',
              value: this.form.topCoin,
              type: 'input',
              solt: '贝币',
              key: 'topCoin'
            }
          ]
        },
        {
          title: '优惠券奖励',
          list: [
            {
              label: '关联优惠券',
              value: this.form.xxx, // TO DO 暂未设置
              type: 'picker',
              key: 'xxx'
            }
          ]
        },
        {
          title: '评分预设文案',
          list: [
            {
              label: '',
              placeholder: '请输入',
              value: this.form.evaluateReady,
              type: 'textarea',
              key: 'evaluateReady'
            }
          ]
        },
        {
          title: '默认回复文案',
          list: [
            {
              label: '',
              placeholder: '请输入',
              value: this.form.evaluateReply,
              type: 'textarea',
              key: 'yyy'
            }
          ]
        }
      ]
    }
  },
  onShow () {
    this.init()
    this.findSHopSetConfig()
    // this.getCouPon() // to do 这个应该是没得用的 到时候钟技师来了问一下
    this.findCouponPage()
  },
  methods: {
    updateSwitchChange (e) {
      e.value = Number(Number(!e.value)).toString()
      this.switchForm[e.key] = e.value
    },
    bindPickerChange (e) {
      const vm = this
      if (!vm.couponPicker.length) {
        return false
      }
      vm.pickerIndex = e.target.value
      vm.pickerName = vm.couponPicker[vm.pickerIndex].couponTypeName
      vm.pickerId = vm.couponPicker[vm.pickerIndex].couponTypeId
    },
    handleSubmit () {
      this.$dialog('是否保存设置', '', '#ef250b').then(() => {
        this.setShopCommertAwardConfig()
      })
    },
    init () {
      const vm = this
      vm.form = {}
      vm.switchForm = {
        multipleScore: '0',
        goodsScore: '0',
        serviceScore: '0',
        expreeScore: '0'
      }
      vm.couponPicker = []
      vm.pickerIndex = ''
      vm.pickerName = ''
      vm.pickerId = ''
    },
    /** api **/
    setShopCommertAwardConfig () {
      const vm = this
      let key = [
        'evaluateImages',
        'coin',
        'evaluateSize',
        'imageCoin',
        'imageIntergral',
        'imagePension',
        'integral',
        'payMoney',
        'pension',
        'topCoin',
        'topIntegergral',
        'topPension'
      ]
      let params = {
        ...vm.form,
        ...vm.switchForm,
        shopId: vm.account.shopId,
        providerId: vm.account.providerId
      }
      key.forEach(_ => {
        if (params[_]) {
          params[_] = Number(params[_])
        }
      })

      SET_SHOP_COMMERT_AWARD_CONFIG(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('设置成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    findSHopSetConfig () {
      const vm = this
      FIND_SHOP_SET_CONFIG(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.form = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    findCouponPage () {
      const vm = this
      let params = {
        // customerId: vm.account.customerId,
        // mobile: vm.$cookie.get('new-admin-info').phone,
        providerId: vm.account.providerId
      }
      FIND_COUPON_PAGE(params, 1, 9999)
        .then(r => {
          if (r.data.code === '0') {
            vm.couponPicker = r.data.data.list
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getCouPon () {
      const vm = this
      let params = {
        couponTypeId: 0,
        customerId: vm.account.customerId,
        mobile: vm.$cookie.get('new-admin-info').phone,
        providerId: vm.account.providerId
      }
      GET_COU_PON(params)
        .then(r => {
          if (r.data.code === '0') {
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  background: #f2f3f7;
  > .list {
    width: 100%;
    > span {
      padding: 0 15px;
      font-size: 14px;
      font-weight: 600;
      line-height: 50px;
      display: block;
    }
    > div {
      width: 100%;
      padding: 0 15px;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      border-bottom: 1px solid #f9f9fb;
      > div {
        display: flex;
        align-items: center;
        font-size: 13px;
        > input {
          text-align: right;
          color: #101010;
        }
        > .solt {
          margin-left: 4px;
        }
        .pickerName {
          color: #ddd;
        }
        .pickerNameOnv {
          color: #101010;
        }
        .icon {
          margin-bottom: 4px;
        }
      }
      > .textarea {
        width: 100%;
        height: 120px;
        display: flex;
        align-items: center;
        > .input {
          width: 100%;
          height: 100px;
          font-size: 14px;
          line-height: 16px;
          color: #101010;
        }
      }
    }
  }
  > .btn {
    width: 95%;
    height: 50px;
    border-radius: 7px;
    margin: 20px auto;
    padding: 0;
    background: #677afe;
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    border: 0;
  }
}
</style>
